<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据库动态饼图</title>
    <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
    <style>
        #main {
            width: 900px;
            height: 600px;
            margin: 20px auto;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
            margin-top: 30px;
            font-family: 'Microsoft YaHei';
        }
    </style>
</head>
<body>
    <h1>网站访问来源统计</h1>
    <div id="main"></div>

    <script>
        // 初始化图表
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        // 配置项
        var option = {
            title: {
                text: '{{ chart_data.title }}',
                subtext: '{{ chart_data.subtitle }}',
                left: 'center',
                textStyle: {
                    fontSize: 18,
                    fontWeight: 'bold'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: {{ chart_data.legend|tojson }},
                textStyle: {
                    fontSize: 12
                }
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['30%', '70%'],
                    center: ['50%', '50%'],
                    roseType: 'radius',
                    itemStyle: {
                        borderRadius: 5,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        formatter: '{b}: {c} ({d}%)'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: true
                    },
                    data: {{ chart_data.series|tojson }}
                }
            ]
        };

        // 应用配置
        myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>